.u-c-c {
    color: #308bff;
    font-weight: 500;
    font-size: 34rpx;
}

.u-f-ss {
    font-size: 18rpx;
}

.u-f-sx {
    font-size: 22rpx !important;
}

.u-f-sm {
    font-size: 24rpx;
}

.u-f-sl {
    font-size: 28rpx;
}

.u-f-sxl {
    font-size: 32rpx;
}


.p-10 {
    padding: 10rpx;
}

.p-15 {
    padding: 15rpx;
}

.p-20 {
    padding: 20rpx;
}

.p-25 {
    padding: 25rpx;
}

.p-30 {
    padding: 30rpx;
}

.p-r-10 {
    padding: 0 10rpx;
}

.p-r-15 {
    padding: 0 15rpx;
}

.p-r-20 {
    padding: 0 20rpx;
}

.p-r-25 {
    padding: 0 25rpx;
}

.p-r-30 {
    padding: 0 30rpx;
}

.p-c-10 {
    padding: 10rpx 0;
}

.p-c-15 {
    padding: 15rpx 0;
}

.p-c-20 {
    padding: 20rpx 0;
}

.p-c-25 {
    padding: 25rpx 0;
}

.p-c-30 {
    padding: 30rpx 0;
}

.l-20 {
    line-height: 20rpx;
}

.l-30 {
    line-height: 30rpx;
}

.l-40 {
    line-height: 40rpx;
}

.b-b {
    border-bottom: 1px solid #eee;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20rpx;
    align-items: center;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20rpx;
    align-items: center;
}


.flex {
    display: flex;
    align-items: center;
    vertical-align: middle;
}

.flex-img {
    display: flex;
    vertical-align: middle;
}

.flex-top {
    display: flex;
    align-items: flex-start;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
}

.flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
    vertical-align: middle;
}

.flex-end {
    display: flex;
    justify-content: flex-end !important;
    align-items: center;
    vertical-align: middle;
}

.flex-column {
    display: flex;
    flex-direction: column;
    vertical-align: middle;
    justify-content: center;
}

.flex-column-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flex-column-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.flex-column-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.flex-column-end {
    display: flex;
    flex-direction: column;
    align-content: flex-end;
}

.shadow {
    box-shadow: 0 0 20rpx rgb(199, 199, 199);
}

.text-center {
    text-align: center;
}

.text-l {
    text-align: left;
}

.text-r {
    text-align: right;
}


.text-1 {
    color: #333;
    /* 单行文本省略 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-2 {
    color: #333;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.f-c-3 {
    color: #333;
}

.f-c-6 {
    color: #666;
}

.f-c-9 {
    color: #999;
}

.f-c-d {
    color: #ddd;
}

.f-c-f{
    color: #fff;
}

.m-t-10{
    margin-top: 10rpx;
}

.m-t-20 {
    margin-top: 20rpx;
}

.m-t-30 {
    margin-top: 30rpx;
}

.m-t-40 {
    margin-top: 40rpx;
}





.border-b {
    border-bottom: 1px solid #eee;
}

.card {
    background: #fff;
    padding: 20rpx;
    margin: 20rpx;
    border-radius: 12rpx;
    position: relative;
}

.sub-card{
    background: #fff;
    border-radius: 10rpx;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.w-card {
    background: #fff;
    padding: 20rpx;
    margin: 20rpx 0;
}


.bottom-fixed {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 20rpx 30rpx 30rpx 30rpx;
    background: #fff;
    z-index: 1000;
    box-sizing: border-box;
}

.planet-bg {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    top: 0;
    left: 0;
}

.btn-border {
    font-size: 24rpx;
    padding: 10rpx 20rpx;
    border-radius: 25rpx;
    color: #666;
    border: 1rpx solid #999;
}

.btn-border:active {
    background: #eee;
}

.active {
    border: 1rpx solid #fd4b03;
    color: #fd4b03;
}

.title-bar{
    background: #fff;
    border-bottom: 1rpx #f7f7f7 solid;
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 60rpx 20rpx 20rpx 20rpx;
    font-size: 32rpx;
    font-weight: 600;
}
